<!DOCTYPE html>
<html>
<head>
    <title>Line</title>
    <meta charset="utf-8">
    <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="../src/JChart.js"></script>
    <script type="text/javascript" src="../src/JChart.Canvas.js"></script>
    <script type="text/javascript" src="../src/JChart.Chart.js"></script>
    <script type="text/javascript" src="../src/JChart.Scale.js"></script>
    <script type="text/javascript" src="../src/JChart.Line.js"></script>
</head>
<body>
<h1 style="text-align: center">折线图</h1>

<div class="chartsContainer" >
    <div style="background-color: #2197f3;color: white;padding: 10px;width: 320px;box-sizing: border-box;">收费总额最近7天趋势图（单位：元/天）</div>
    <canvas id="line_canvas"></canvas>
</div>

<script type="text/javascript">
    var data = {
        labels : ["04","05","06","07","08","09","10"],
        datasets : [
            {
                name : 'B产品',
               color : "#7bc1f8",
			    pointColor : "#2197f3",
			    pointBorderColor : "#fff",
//              data : [28,48,40,19,96,27,100],
                data:[0,2209,4120.57,14500.99,5494.85,643,821.03]
//				data : [1,1,1,1,1,1,1]
//              data : [0,0,0,0,0,0,1]
            }
        ]
    }
    var line = new JChart.Line(data,{
        id : 'line_canvas',
        height : 150,
        width : 320,
        fill:false,
        drawScaleFirst:false,
        datasetShowNumber:7,
        scaleLineColor:"#2197f3",
        showGridLine:false,
        showScaleLabel:false,
        textFont : {
            size : 14,
            textBaseline : 'bottom',
            color:"#fff"
        },
        scaleFont : {
            size:14,
            color : '#fff'
        },
        bgColor:"#2197f3",
        animationEasing:"easeOutCubic",
        animation:true,
        smooth:true
    });
    line.on('tap.point',function(data,i,j){
        alert(data);
    });
    line.draw();

</script>
</body>
</html>